<script setup lang="ts">
import { nextTick, onMounted, reactive, ref } from "vue"
import { ElMessage } from "element-plus"
import {Refresh} from '@element-plus/icons-vue'
import { aiTaps } from "./aiTaps.js"
const proNum = 2
const aiProList = reactive(aiTaps||[])
const aiCascard = {
//   multiple: true,
  checkStrictly: true,
  value:'label', 
  label: 'label', 
  children: 'children'
}
let aiTypeArr = reactive(["手机端-城市图片","城市图片5分区"])
let aiTypeSrc = ref('手机端-城市图片/城市图片6分区')
let previewSrcList = reactive([])
const initialIndex = ref(0)
const refreshNum = ref(0)

onMounted(()=>{
})
const refreshPro = () => {
    refreshNum.value=(Math.random()*100).toFixed(2)

}
const changeAi  = (e:Array<string>) => {   
    console.log(e,'e ======== ')
    aiTypeArr = e
}

const visibleChange  = (e:boolean) => {
    console.log(e,'e =====44=== ')
    if(e){
        // 打开
    } else {
        // 关闭
        aiTypeSrc.value = aiTypeArr.join('/')
    }
}
const successLoad = (index:number,item:string) => {
    previewSrcList[index-1] = item
}
</script>

<template>
    <div class="ai-portfolio">
        <div class="top-card">
            <span>AI数据集</span>
            <el-cascader v-model="aiTypeArr" @visibleChange="visibleChange" @change="changeAi" :options="aiProList" :props="aiCascard" />
            <el-button @click="refreshPro" style="" :icon="Refresh" circle />
        </div>
        <div class="pro-list">
            <div class="item">
                <el-image
                    v-for="item in proNum" :key="item"
                    :src="`https://hefollo.cn/api.php?type=${aiTypeSrc}&index=${item}&randomNum=${refreshNum}`"
                    :zoom-rate="1.04"
                    :max-scale="5"
                    :min-scale="0.2"
                    :preview-src-list="previewSrcList"
                    :initial-index="initialIndex"
                    @load="()=>{
                        successLoad(item,`https://hefollo.cn/api.php?type=${aiTypeSrc}&index=${item}&randomNum=${refreshNum}`)
                    }"
                    @show="()=>{initialIndex = item-1}"
                    fit="cover"
                />
            </div>
            
        </div>
    </div>
</template>
<style lang="scss">
.ai-portfolio{
    .el-cascader{
        width: calc(100% - 110px);
        margin: 0 10px;
    }
}
</style>
<style scoped lang="scss">
.ai-portfolio{
    width: 100%;
    height: 100%;
    text-align: center;
    color: #fff;
    text-align: left;
    .top-card{
        height: 45px;
        line-height: 45px;
        display: flex;
        align-items: center;
        border-bottom: 2px solid #eee;
        margin-bottom: 2px;
        >span{
            color: #333;
            font-size: 14px;
            user-select: none;
        }
    }
    .pro-list{
        max-height: calc(100% - 50px);
        overflow: hidden;
        overflow-y: auto;
        .item{
            column-count: 2;
            height: auto;
        }
        .el-image{
            // width: calc(50% - 2px);
            max-width: auto;
            border-radius: 4px;
            &:nth-child(even){
                margin-left: 4px;
            }
        }
    }
}
</style>
